 /* 封装 WebSocket 实例化的方法  */
 var CreateWebSocket = (function () {
    return function (urlValue) {
        if (window.WebSocket) return new WebSocket(urlValue);
        if (window.MozWebSocket) return new MozWebSocket(urlValue);
        return false;
    }
})();

var webSocket = null;
var name = null;
var message = null;
var messageListEl = document.getElementById('messageList');

/*跳转到内容界面*/
function goContent() {
    name = document.getElementById('nameInput').value;
    if (name && name != '') {
        document.getElementById('loginDiv').style.display = 'none';
        document.getElementById('main').style.display = 'block';
        /* 实例化 WebSocket 连接对象, 地址为 ws 协议 */
        webSocket = CreateWebSocket("ws://192.168.1.120:8200");
        /* 连接到服务端时*/
        /* type为消息类型*/
        webSocket.onopen = function () {
            webSocket.send(JSON.stringify({
                name: name,
                type: 'goOnline',
                time: new Date().toLocaleString()
            }));
        };

        /* 接收到服务端的消息时 */
        webSocket.onmessage = function (msg) {
            message = JSON.parse(msg.data);
            console.log(message);

            if (message.type == 'goOnline') {
                let template = `<div class="onOffLine"><span> ${message.name} 上线了 ${message.time} </span></div>`
                messageListEl.innerHTML += template;
            } else if (message.type == 'goOutline') {
                let template = `<div class="onOffLine"><span> ${message.name} 下线了 ${message.time} </span></div>`
                messageListEl.innerHTML += template;
            } else if (message.type == 'chat') {
                if (message.name == name) {
                    let template = `
                    <div class="message me">
                        <div class="content">
                            <div class="nickname">
                                <span style="font-size: 20px;">
                                    ${message.name}
                                </span>
                                <span class="time"> ${message.time} </span>
                            </div>
                            <div class="bubble bubble_primary right">
                                <div class="bubble_cont">
                                    <div class="plain">
                                        <pre> ${message.content}</pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    `
                    messageListEl.innerHTML += template;
                } else {
                    let template = `
                    <div class="message">
                        <div class="content">
                            <div class="nickname">
                            <span style="font-size: 20px;">
                                    ${message.name} 
                            </span>
                            <span class="time"> 
                            ${message.time} 
                            </span>
                            </div>
                            <div class="bubble bubble_default left">
                                <div class="bubble_cont">
                                    <div class="plain">
                                        <pre>${message.content} </pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    `
                    messageListEl.innerHTML += template;
                }
            }
            messageListEl.scrollTo(0, messageListEl.scrollHeight);

        };

        /* 关闭时 */
        webSocket.onclose = function () {
            webSocket.send(JSON.stringify({
                name: name,
                type: 'goOutline',
                time: new Date().toLocaleString()
            }));
        };

        /* 异常时 */
        webSocket.onerror = function (res) {
            console.log(res);
        }
    }
}

/* 发送消息 */
document.getElementById("btn_send").onclick = function () {
    send();
}

function type(e) {
    if (e.keyCode == 13) {
        send();
    }
}

function send() {
    var str = ClearBr(document.getElementById("editArea").innerText);
    if (str && str != '') {
        webSocket.send(JSON.stringify({
            name: name,
            type: 'chat',
            content: str,
            time: new Date().toLocaleString()
        }));
        document.getElementById("editArea").innerText = '';
    }
}

//去除换行 
function ClearBr(key) {
    key = key.replace(/<\/?.+?>/g, "");
    key = key.replace(/[\r\n]/g, "");
    return key;
}